<!--
 * @Author: yao
 * @Date: 2025-01-30 21:33:24
 * @LastEditTime: 2025-01-31 17:50:17
 * @LastEditors: yao
 * @Description: 
 * @FilePath: \jdev-web-el\src\components\JSearch\index.vue
-->
<template>
  <div class="JSearch">
    <div class="JSearch-icon">
      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
        <title>magnifying-glass</title>
        <path
          d="M17.545 15.467l-3.779-3.779c0.57-0.935 0.898-2.035 0.898-3.21 0-3.417-2.961-6.377-6.378-6.377s-6.186 2.769-6.186 6.186c0 3.416 2.961 6.377 6.377 6.377 1.137 0 2.2-0.309 3.115-0.844l3.799 3.801c0.372 0.371 0.975 0.371 1.346 0l0.943-0.943c0.371-0.371 0.236-0.84-0.135-1.211zM4.004 8.287c0-2.366 1.917-4.283 4.282-4.283s4.474 2.107 4.474 4.474c0 2.365-1.918 4.283-4.283 4.283s-4.473-2.109-4.473-4.474z">
        </path>
      </svg>
    </div>
    <input :value="modelValue" @input="updateValue" v-bind="$attrs" placeholder="搜索菜单" type="text" class="input">
  </div>
</template>

<script setup lang="ts">
const modelValue = defineModel();
const updateValue = (event) => {
  modelValue.value = event.target.value;
}
</script>

<style lang="scss" scoped>
.JSearch {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;

  .JSearch-icon {
    position: absolute;
    fill: rgb(115.2, 117.6, 122.4);
    left: 0.5rem;
    top: 0.5rem;
  }
}

.input {
  width: 100%;
  font-size: 16px;
  box-sizing: border-box;
  line-height: 28px;
  border: 2px solid transparent;
  border-bottom-color: #777;
  padding: .2rem 2rem;
  outline: none;
  background-color: transparent;
  color: #0d0c22;
  transition: .3s cubic-bezier(0.645, 0.045, 0.355, 1);
}


.input:focus,
input:hover {
  outline: none;
  padding: .2rem 2rem;
  border-radius: 1rem;
  border-color: var(--ep-background);
}

.input::placeholder {
  color: #777;
}

.input:focus::placeholder {
  opacity: 0;
  transition: opacity .3s;
}
</style>